<!DOCTYPE html>
<!-- saved from url=(0060)http://www.dengyukeji.cn/Mobile/Show/action?page=orderCenter -->
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>柜体中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="/Public/Home/css/weui.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/Public/Home/css/weui-ext.css">
    <link href="/Public/Home/css/orderCenter.css" rel="stylesheet">
    <style>
        .page {
            padding-bottom: 50px;
        }

        #menu {
            height: 50px;
            line-height: 50px;
            display: flex;
            align-content: center;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 99;
            width: 100%;
            background: #fff;
            border-top: 1px solid #eee;
        }

        #menu .menu-item {
            height: 100%;
            flex: 1;
            text-align: center;
        }

        .br {
            border-right: 1px solid #eee;
        }

        .crad {
            background: #fff;
            box-shadow: 0 0 15px #eee;
            width: 30%;
            float: left;
            margin: 1.5%;
        }

        .crad>div {
            margin: 0px;
            text-align: center
        }

        .crad-content {
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: space-around;
            font-size: 12px;
            padding: 10px 0;
        }

        .crad-header {
            border-bottom: 1px solid #eee;
            padding: 10px 0;
            font-size: 12px;
        }

        .yellow {
            background: yellow;
        }

        .pink {
            background: pink;
        }

        #orderCenter_template {
            overflow: hidden;
        }
    </style>
</head>

<body>

    <div class="page">
        <div class="page__bd page__content">
            <!-- <p class="menuTitle">显示近3天数据，输入单号可查询近一个月数据</p> -->
            <div class="order_list">
                <div id="orderCenter_template">
                </div>
            </div>
        </div>


        <div id="menu">
            <div class="menu-item br" id="account">
                <i></i>
                <span>商家中心</span>
            </div>
            <div class="menu-item" id="guizi">
                <i></i>
                <span>柜体中心</span>
            </div>
        </div>

        <div id="loadingToast" style="display:none;">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-loading weui-icon_toast"></i>
                <p class="weui-toast__content">没有更多了</p>
            </div>
        </div>
        <div id="toast" style="display: none;">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                <p class="weui-toast__content">已打开柜门</p>
            </div>
        </div>
        <div id="noData" style="display: none;">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-icon-info weui-icon_toast" style="font-size: 55px;color: #fff;"></i>
                <p class="weui-toast__content">已被标记不可用</p>
            </div>
        </div>
    </div>
    <script src="/Public/Home/js/zepto.min.js"></script>
    <script src="/Public/Home/js/weui.min.js"></script>
    <script src="/Public/Home/js/zepto.ajax.js"></script>
    <script>
        $('#account').on('click', function () {
            window.location.href = "/Home/Orders/index"; // 
        })
        $('#guizi').on('click', function () {
            window.location.href = "/Home/Orders/guizi"; // 
        })
        $('#orderCenter_template').on('click', '.crad', function () {
            var typeStr = $(this).hasClass('pink');
            var id = $(this).attr('data-id');
            if (!typeStr) {
                 $.post('/Home/Orders/addTasksData', { id: id }, function (res) {
                     if (res.code == 10000) {
                        $('#toast').show(100);
                        setTimeout(function () {
                             $('#toast').hide(100);
                        }, 2000);
                     }
                 })
            } else {
                $('#noData').show(100);
                setTimeout(function () {
                     $('#noData').hide(100);
                }, 2000);
            }
        })




        var page = 1;
        $.post('/Home/Orders/getDoors', { page: page }, function (res) {
            console.log(res)
            if (res.code == 10000) {
                $.each(res.data, function (i, e) {
                    if (e.nickname) {
                        console.log(e)
                        var className = ''
                        if (e.functional == 1) {
                            className = 'pink'
                        }
                        if (e.orderid) {
                            className = 'yellow'
                        }
                        var html = '<div class="crad ' + className + ' " data-id="' + e.id + '"><div class="crad-header">' + e.code + '</div><div class="crad-content"><div class="row">第' + (e.codex - 0 + 1) + '列</div><div class="col">第' + (e.codey - 0 + 1) + '行</div></div></div>'
                        $('#orderCenter_template').append(html)
                    }
                })
            } else {
                $('#loadingToast').show(100);

                setTimeout(function () {
                    $('#loadingToast').hide(100);
                }, 2000);
            }
        })


        //touchstart事件
        function touchSatrtFunc(evt) {
            try {
                // evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

                var touch = evt.touches[0]; //获取第一个触点
                var x = touch.pageX; //页面触点X坐标
                var y = touch.pageY; //页面触点Y坐标
                //记录触点初始位置
                startX = x;
                startY = y;
            }
            catch (e) {
                alert('touchSatrtFunc：' + e.message);
            }
        }

        //touchmove事件，这个事件无法获取坐标
        function touchMoveFunc(evt) {
            try {
                // evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
                var touch = evt.touches[0]; //获取第一个触点
                var x = touch.pageX; //页面触点X坐标
                var y = touch.pageY; //页面触点Y坐标
                if (y - startY < -100) {
                    // 上拉加载数据
                    document.addEventListener('touchend', touchEndFunc, false);

                }
            }
            catch (e) {
                alert('touchMoveFunc：' + e.message);
            }
        }
        var page = 1;
        //touchend事件
        function touchEndFunc(evt) {
            try {
                evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
                var time = $('.day .active').attr('data-id');
                var type = $('.type .active').attr('data-id');

                page = page + 1;
                // 移除触摸事件
                document.removeEventListener('touchend', touchEndFunc, false);
                // 添加数据
                $.post('/Home/Orders/getDoors', { page: page }, function (res) {
                    console.log(res)
                    if (res.code == 10000) {
                        $.each(res.data, function (i, e) {
                            if (e.nickname) {
                                var className = ''
                                if (e.functional == 1) {
                                    className = 'pink'
                                }
                                if (e.orderid) {
                                    className = 'yellow'
                                }
                                var html = '<div class="crad ' + className + ' " data-id="' + e.id + '"><div class="crad-header">' + e.code + '</div><div class="crad-content"><div class="row">第' + (e.codex - 0 + 1) + '列</div><div class="col">第' + (e.codey - 0 + 1) + '行</div></div></div>'
                                $('#orderCenter_template').append(html)
                            }
                            console.log(e)

                        })
                    } else {
                        $('#loadingToast').show(100);

                        setTimeout(function () {
                            $('#loadingToast').hide(100);
                        }, 2000);
                    }
                })
            }
            catch (e) {
                alert('touchEndFunc：' + e.message);
            }
        }
        //绑定事件
        function bindEvent(f) {
            if (f == 1) {
                document.removeEventListener('touchstart', touchSatrtFunc, false);
                document.removeEventListener('touchmove', touchMoveFunc, false);

            } else {
                document.addEventListener('touchstart', touchSatrtFunc, false);
                document.addEventListener('touchmove', touchMoveFunc, false);

            }
        }
        //判断是否支持触摸事件
        function isTouchDevice() {
            try {
                document.createEvent("TouchEvent");
                //alert("支持TouchEvent事件！");
                bindEvent(); //绑定事件
            }
            catch (e) {
                //alert("不支持TouchEvent事件！" + e.message);
            }
        }
        isTouchDevice();

    </script>
</body>

</html>